<template>
  <ul class="wztypeUl" v-if="ArticleTypes" id="wztypeUl">
    <li class="wztype liBgc" @click="liClick(0, '')">全部</li>
    <li
      class="wztype"
      v-for="(item, index) in ArticleTypes"
      @click="liClick(index + 1, item)"
      :key="index"
    >
      {{ item }}
    </li>
  </ul>
  <div class="nr" v-if="articleList">
    <Timeline>
      <TimelineItem
        v-for="item in articleList.records"
        @click="goArticle(item.id, item.encryption)"
        :key="item.id"
      >
        <template #dot>
          <Image :src="item.img" lazy style="width: 60px; height: 50px; margin-left: -10px">
            <template #placeholder>
              <div class="imgLoading"></div>
            </template>
          </Image>
        </template>
        <div class="timeItem">
          <div class="modal">
            <h3 class="title">
              {{ item.title }}
            </h3>
            <p class="time">📅 {{ item.creationTime }}</p>
          </div>
        </div>
      </TimelineItem>
    </Timeline>

    <el-pagination
      @current-change="fyChange(articleList.current)"
      v-model:current-page="articleList.current"
      background
      layout="prev, pager, next"
      :total="parseInt(articleList.total)"
      :page-size="8"
    />
  </div>

  <!-- 加载动画 -->
  <div class="loaderET" v-else>
    <div class="loaderMiniContainer">
      <div class="barContainer">
        <span class="bar"></span>
        <span class="bar bar2"></span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 101 114" class="svgIcon">
        <circle
          stroke-width="7"
          stroke="black"
          transform="rotate(36.0692 46.1726 46.1727)"
          r="29.5497"
          cy="46.1727"
          cx="46.1726"
        ></circle>
        <line
          stroke-width="7"
          stroke="black"
          y2="111.784"
          x2="97.7088"
          y1="67.7837"
          x1="61.7089"
        ></line>
      </svg>
    </div>
  </div>

  <!-- 抽屉 -->
  <ArticleDrawer />
</template>
<script setup>
  import { ScrollIntoView } from 'view-ui-plus';
  const axios = inject('axios');
  import variable from '../../../js/variable';
  const ArticleDrawer = defineAsyncComponent(
    () => import('../../../components/frontdesk/ArticleDrawer.vue'),
  );

  const router = useRouter();

  const ArticleTypes = ref(null); //所有文章分类数据

  onMounted(() => {
    findArticleType();
    findArticleByType(1);
  });

  //查询所有文章分类
  function findArticleType() {
    axios
      .get('article/findArticleType')
      .then((response) => {
        let res = response.data;
        if (res.msg == '成功') {
          ArticleTypes.value = res.data;
        }
      })
      .catch();
  }

  const typeValue = ref(null);
  //分类点击事件
  function liClick(index, type) {
    typeValue.value = type;

    // 获取页面中所有的 <li> 元素
    const liElements = document.getElementsByClassName('wztype');
    // 转换成数组并使用 forEach
    Array.from(liElements).forEach((li) => {
      li.classList.remove('liBgc');
    });
    // 然后将选定的 <li> 元素添加 "liBgc" 类
    liElements[index].classList.add('liBgc');
  }

  const articleList = ref(null);
  //根据分类查询文章列表
  function findArticleByType(pageNum) {
    axios
      .post('article/findArticle', {
        pageNum: pageNum,
        type: typeValue.value,
        pageSize: 8,
        sfTop: false,
      })
      .then((response) => {
        let res = response.data;
        if (res.msg == '成功') {
          articleList.value = res.data;
        }
      })
      .catch();
  }

  //切换分类监听
  watch(
    () => typeValue.value,
    (newV, oldV) => {
      findArticleByType(articleList.current);
    },
  );

  //页码改变
  function fyChange(pageNum) {
    findArticleByType(pageNum);

    // 滚动至评论区域顶部
    ScrollIntoView(document.getElementById('wztypeUl'), {
      time: 1000,
    });
  }

  //打开文章
  function goArticle(id, encryption) {
    if (encryption != 1) {
      router.push({ name: 'Article', params: { id: id } });
    } else {
      variable.wzDrawerStzte.value = true;
      variable.chouTiArticle.value.id = id;
    }
  }
</script>

<style scoped>
  li {
    list-style-type: none;
  }

  .wztypeUl {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
  }

  .wztype {
    margin-left: 5px;
    padding: 3px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
  }

  .liBgc {
    background-color: #425aef;
    color: #fff;
  }

  .nr {
    /* min-height: 1000px; */
    padding: 50px;
    user-select: none;
  }

  .time {
    padding-bottom: 15px;
    color: #b9b9b9;
  }

  .title {
    letter-spacing: 1px;
    color: #474747;
  }

  .timeItem {
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    background-position: 50% 50%;
    margin: -30px 0 40px 40px;
  }

  .modal {
    border-radius: 10px;
    padding: 10px 0 1px 10px;
    width: 100%;
    height: 100%;
  }

  /* -------------loader------------------------ */
  .loaderET {
    margin-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loaderMiniContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 130px;
    height: fit-content;
  }
  .barContainer {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    background-position: left;
  }
  .bar {
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, rgb(161, 94, 255), rgb(217, 190, 255), rgb(161, 94, 255));
    background-size: 200% 100%;
    border-radius: 10px;
    animation: bar ease-in-out 3s infinite alternate-reverse;
  }
  @keyframes bar {
    0% {
      background-position: left;
    }
    100% {
      background-position: right;
    }
  }
  .bar2 {
    width: 50%;
  }
  .svgIcon {
    position: absolute;
    left: -25px;
    margin-top: 18px;
    z-index: 2;
    width: 70%;
    animation: search ease-in-out 3s infinite alternate-reverse;
  }
  @keyframes search {
    0% {
      transform: translateX(0%) rotate(70deg);
    }

    100% {
      transform: translateX(100px) rotate(10deg);
    }
  }
  .svgIcon circle,
  line {
    stroke: rgb(162, 55, 255);
  }
  .svgIcon circle {
    fill: rgba(98, 65, 142, 0.238);
  }

  /* -------------loader------------------------ */
</style>
